import React, {Component} from 'react'
import {
    View,
    Text,
    StyleSheet,
    ScrollView,Image
} from 'react-native'

export default class SV extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <View style={styles.container}>

                <ScrollView>
                    <View style={styles.three_image_view}>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}} />
                            <Text style={styles.top_text}>
                                sdfsdf
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text}>
                                附近
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text} >
                                兴趣部落
                            </Text>
                        </View>
                    </View>
                    <View style={{height:30,backgroundColor:'#f9f9fb'}}/>

                    <View style={styles.three_image_view}>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}} />
                            <Text style={styles.top_text}>
                                好友动态
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text}>
                                附近
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text} >
                                兴趣部落
                            </Text>
                        </View>
                    </View>
                    <View style={{height:30,backgroundColor:'#f9f9fb'}}/>

                    <View style={styles.three_image_view}>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}} />
                            <Text style={styles.top_text}>
                                好友动态
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text}>
                                附近
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text} >
                                兴趣部落
                            </Text>
                        </View>
                    </View>
                    <View style={{height:30,backgroundColor:'#f9f9fb'}}/>

                    <View style={styles.three_image_view}>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}} />
                            <Text style={styles.top_text}>
                                好友动态
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text}>
                                附近
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text} >
                                兴趣部落
                            </Text>
                        </View>
                    </View>
                    <View style={{height:30,backgroundColor:'#f9f9fb'}}/>

                    <View style={styles.three_image_view}>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}} />
                            <Text style={styles.top_text}>
                                好友动态
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text}>
                                附近
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text} >
                                兴趣部落
                            </Text>
                        </View>
                    </View>
                    <View style={{height:30,backgroundColor:'#f9f9fb'}}/>

                    <View style={styles.three_image_view}>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}} />
                            <Text style={styles.top_text}>
                                好友动态
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text}>
                                附近
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text} >
                                兴趣部落
                            </Text>
                        </View>
                    </View>
                    <View style={{height:30,backgroundColor:'#f9f9fb'}}/>

                    <View style={styles.three_image_view}>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}} />
                            <Text style={styles.top_text}>
                                好友动态
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text}>
                                附近
                            </Text>
                        </View>
                        <View style={styles.vertical_view}>
                            <Image source={require('../images/mine.png')} style={{alignSelf:'center',width:45,height:45}}/>
                            <Text style={styles.top_text} >
                                兴趣部落
                            </Text>
                        </View>
                    </View>
                    <View style={{height:30,backgroundColor:'#f9f9fb'}}/>
                </ScrollView>


            </View>

        )

    }
}

var THUMBS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png',
    'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png',
    'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png',
    'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png',
    'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png',
    'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png',
    'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png',
    'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png',
    'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png',
    'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png',
    'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png',
    'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS
var createThumbRow = (uri, i) => <Thumb key={i} uri={uri}/>;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    title_view:{
        flexDirection:'row',
        height:50,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#27b5ee',
    },
    title_text:{
        color:'white',
        fontSize:20,
        textAlign:'center'
    },
    three_image_view:{
        paddingTop: 15,
        flexDirection:'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor:'white',
    },
    vertical_view:{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'white',
        paddingBottom:15,
    },
    top_text:{
        marginTop:5,
        color:'black',
        fontSize:16,
        textAlign:'center'
    },
    rectangle_view:{
        paddingTop:8,
        paddingBottom:8,
        paddingLeft:15,
        paddingRight:15,
        flexDirection:'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor:'white',
        borderBottomColor:'#dedfe0',
        borderBottomWidth:1,
    },
    rectangle_text:{
        color:'black',
        fontSize:16,
        textAlign:'center',
        paddingLeft:8,
    },
    button: {
        margin: 7,
        padding: 5,
        alignItems: 'center',
        backgroundColor: '#eaeaea',
        borderRadius: 3,
    },
})